Impressum
Impressum
Typographie stilisieren und anpassen
Hilfreiche Einschätzung der Schwierigkeit
Wie relevant und hilfreich ist es?
Wie schwer ist es anzuwenden?
HTML bildet die Grundlage einer Webseite und definiert die Struktur und den Inhalt. Mit CSS (Cascading Style Sheets) kann dieses Gerüst dann visuell gestaltet werden. Da die Gestaltung von der Struktur getrennt ist, lässt sich dieselbe HTML-Basis nutzen, um unterschiedliche visuelle Designs zu erstellen.
CSS spielt eine entscheidende Rolle bei der Ästhetik und Typografie einer Webseite. Es ermöglicht, Schriftarten, Textgrößen und Zeilenabstände so anzupassen, dass die Lesbarkeit und das Benutzererlebnis verbessert werden. Für die Gestaltung von Typografie im Web ist CSS daher unverzichtbar, da es die Kontrolle über das gesamte Erscheinungsbild und die Wirkung des Textes bietet.
/* Ein Beispiel eines CSS-Codes */
/* Alle h1 Überschriften erhalten die Farbe Weiß */
h1 {
color: white;
}
/* Alle p Paragraphen sind nun zentriert */
p {
text-align: center;
}
CSS kann auf drei verschiedene Arten in eine HTML-Seite eingebunden werden:
Inline-CSS: Der CSS-Code wird direkt in ein HTML-Element eingefügt. Dabei wird das Design jedoch nicht vom Inhalt getrennt,
was die Wartung erschwert. Eine konsistente Gestaltung über mehrere HTML-Seiten hinweg wird problematisch, da das Styling in
jedem Element separat eingefügt werden muss.
Internes Stylesheet: CSS kann im head-Bereich eines HTML-Dokuments hinzugefügt werden. Obwohl das Styling zentraler organisiert
ist als bei Inline-CSS, bleibt das Problem bestehen, dass das Design nur für die jeweilige Seite gilt.
Externes Stylesheet: Die effektivste Methode ist das Einbinden einer separaten CSS-Datei. Dadurch kann ein einziges Stylesheet
auf mehreren HTML-Seiten angewendet werden, was die Wartung erheblich vereinfacht und eine konsistente Gestaltung über die gesamte
Webseite ermöglicht.
/* Inline CSS-Code */
<h1 style="color:red;">This text is red</h1>
<p style="font-size:15px;">This text is small</p>
/* Internes Stylesheet */
<head>
<style>
p {
color: blue;
font-size: 30px;
}
</style>
</head>
/* Externes Stylesheet */
/* Hier als ein Link zu der Datei mystyle.css */
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
Damit das Stylesheet angewendet wird, müssen sogenannte Selektoren verwendet werden, um festzulegen, welche HTML-Elemente von bestimmten CSS-Regeln betroffen sein sollen. Es gibt dabei drei Haupttypen von Selektoren:
Der Element-Selektor bezieht sich auf ein spezifisches HTML-Tag, wie z.B. einen Paragraphen (p) oder eine Überschrift (h1 bis h6). Alle HTML-Elemente dieses Typs, die im Dokument vorhanden sind, werden von den zugehörigen CSS-Regeln beeinflusst.
Um mehrere verschiedene Elemente zu stylen, verwendet man den Klassen-Selektor. Dieser erhält einen benutzerdefinierten Namen und wird sowohl in der HTML-Datei als auch im Stylesheet verwendet. Klassen können in einem HTML-Dokument mehrfach vorkommen, was es ermöglicht, ähnliche Elemente auf einheitliche Weise zu gestalten.
Der ID-Selektor wird verwendet, um ein einzelnes Element, das durch eine eindeutige ID identifiziert wird, zu stylen. Eine ID darf nur einmal in einem HTML-Dokument verwendet werden, sodass sie spezifisch ein einzelnes Element beeinflusst.
/* Ein Beispiel der HTMl Datei: index.html*/
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div class="important-text">
<p>This an important paragraph.</p>
</div>
<p id="extra">This is a paragraph.</p>
</body>
</html>
/* Ein Beispiel der CSS Datei: mystyle.css*/
/* Element Selektor */
h1 {
font-family: Arial, sans-serif;
font-size: 50px;
}
p {
font-family: Inter, sans-serif;
font-size: 20px;
}
/* Klassen Selektor */
.important-text {
color: red;
}
/* ID Selektor*/
#extra {
font-weight: 600;
}
Es gibt eine große Anzahl an CSS-Eigenschaften, welche für Typografie enorm wichtig sein können. Weitere Sammlungen von CSS-Eigenschaften sind online verfügbar und auf den empfohlenen Webseiten unten auf dieser Seite zu finden. Hier sind ein paar Beispiele :
Font-Family legt fest, welche Schriftart für einen Text verwendet werden soll. Dabei kann auch eingestellt werden, ob die Schrift mit Serifen oder ohne Serife dargestellt wird.
Font-Size bestimmt die Schriftgröße, welche in verschiedenen Einheiten wie Pixel, em oder rem angegeben werden kann. Mehr zu Schriftgrößen und den Einheiten finden sich im Abschnitt Font-Sizing.
Font-Weight steuert die Dicke der Schrift. Hierbei werden anhand der gewählten Schrift übliche Werte wie normal, bold oder Zahlenwerte wie 400 und 700 verwendet.
Line-Height bestimmt den Abstand zwischen Textzeilen. Diese kann in relativen Einheiten wie em oder absoluten Einheiten wie Pixeln angegeben werden.
Letter-Spacing verändert den Abstand zwischen den einzelnen Buchstaben.
Color ermöglicht es, die Farbe der Schrift zu verändern. Hier ist es möglich Farbennamen, RGB-, HEX- oder HSL-Werte zu verwenden.
/* Ein Beispiel zu Font-Family, Font-Size, Font-Weight */
h2 {
font-family: 'Roboto', sans-serif;
font-size: 45px;
font-weight: 700;
}
p {
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 400;
}
/* Ein Beispiel zu Line-Height, Letter-Spacing, Color */
h5 {
line-height: 1.5;
letter-spacing: 2px;
color: #ff6347;
}
p {
line-height: 50%;
letter-spacing: -1px;
color: rgb(255, 99, 71);
}
Nicht alle Schriftsysteme verwenden ein ähnliches Alphabet. Viele Schriften sind speziell für bestimmte
Schriftsysteme (z.B. kyrillisch, arabisch, griechisch) optimiert. Hier ist es wichtig, Schriftarten zu wählen,
die diese Schriftsysteme korrekt und leserlich darstellen. CSS ermöglicht es, spezifische Schriftarten für
verschiedene Schriftsysteme zu definieren. Dabei spielt das lang-Attribut im HTML eine Rolle, um die passende
Schriftart in der CSS-Datei auszuwählen.
Für Sprachen mit unterschiedlichen Schreibrichtungen kann der Textfluss über die CSS-Eigenschaft direction angepasst werden.
/* Ein Beispiel für mehrsprachige Optimierung in CSS */
body {
font-family: "Arial", sans-serif;
}
/* Für kyrillisch */
html[lang="ru"] body {
font-family: "Rubik", sans-serif;
}
/* Für arabisch */
html[lang="ar"] body {
font-family: "Amiri", serif;
}
/* Ein Beispiel für Arabisch */
/* Arabisch wird von Rechts nach Links gelesen */
html[lang="ar"] body {
direction: rtl;
text-align: right;
}
Alle CSS-Dateien wurden als externe Stylesheets eingebunden, wobei darauf geachtet wurde, dass nur die benötigten CSS-Dateien in
die jeweiligen HTML-Dokumente integriert wurden.
Um die Verwaltung und Anpassung von CSS-Eigenschaften wie Farben, Schriftgrößen und anderen Gestaltungselementen zu vereinfachen,
wurde eine zentrale CSS-Datei namens „variables.css“ erstellt, die alle wichtigen CSS-Variablen enthält. In dieser Datei wurden
unter dem :root-Selektor die wichtigsten Variablen mit Namen und Werten definiert. Diese Variablen wurden dann in anderen CSS-Dateien
verwendet, was die Wartung erleichtert und Anpassungen deutlich effizienter macht.
Auf dieser Webseite wurden ausschließlich Element- und Klassen-Selektoren verwendet, da ID-Selektoren nicht notwendig waren.
Da die Webseite für deutschsprachige Nutzer gedacht ist, wurde im HTML-Dokument ausschließlich das lang-Attribut für die
deutsche Sprache definiert.
Zu den am häufigsten genutzten Techniken gehören CSS-Eigenschaften wie font-size, font-weight, line-height, letter-spacing und color,
um den Text der Webseite zu gestalten. Diese Eigenschaften wurden zunächst als Variablen festgelegt und dann in allen anderen
CSS-Dateien wiederverwendet. Es gibt auch Stellen, wo die Eigenschaften ohne Variable deklariert wurden. Besonders hervorzuheben ist der Text unter
jeder Überschrift, der durch einen Farbverlauf hervorgehoben wird. Dieser Effekt wurde erzielt, indem ein Farbverlauf als Hintergrund festgelegt und
dann nur auf den Textbereich angewendet wurde.
/* Ein Ausschnitt aus der variables.css Datei */
/* Hier sind nicht alle Variablen aufgelistet! */
:root {
/* colors */
--color-catch-title: rgb(51, 51, 51);
--color-catch-text: rgb(117, 117, 117);
--accent: #f26172;
--primary: #4690f0;
--text: #020a15;
/* font weight */
--font-weight-regular: 400;
--font-weight-medium: 500;
/* font size */
--font-size-xs: 0.938rem;
--font-size-xl: 6.25rem;
--font-size-title-text: 2.188rem;
/* letter spacing */
--catch-title-spacing: -2px;
--catch-text-spacing: -0,5px;
/* line height */
--catch-title-line-height: 1.2em;
--catch-text-line-height: 1.5em;
}
/* Ein Ausschnitt aus der aspect-page-information.css */
.info-point h4{
font-size: var(--font-size-info-title);
color: var(--color-catch-title);
padding-bottom: 40px;
line-height: var(--catch-title-line-height);
letter-spacing: -2.1px;
}
.info-point p{
font-size: var(--font-size-text);
font-weight: var(--font-weight-regular);
color: var(--text);
padding-bottom: 30px;
}
/* Ausschnitt für den Farbverlauf aus der intro.css*/
.title-card p {
font-size: var(--font-size-title-text);
font-weight: var(--font-weight-medium);
background: linear-gradient(120deg, var(--primary), var(--accent));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
align-self: center;
}
Verwende CSS Custom Properties für wiederverwendbare Werte wie Schriftgrößen, Abstände und Farben. Dies sorgt für ein konsistentes Design und erleichtert die Gestaltung der Schrift.
CSS bietet zahlreiche Möglichkeiten, Schriften zu gestalten und anzupassen. Experimentiere mit verschiedenen Kombinationen, um herauszufinden, welche Designs am besten funktionieren. Oft kann jedoch eine schlichte und reduzierte Gestaltung effektiver sein als ein komplexes Design.
Für längere Textblöcke oder Absätze ist ein etwas größerer Zeilenabstand empfehlenswert, um die Lesbarkeit zu verbessern. Bei Überschriften oder kürzeren Texten kann der Zeilenabstand hingegen reduziert werden, um eine kompakte Darstellung zu erzielen. Teste verschiedene Kombinationen, um den optimalen Zeilenabstand für das jeweilige Design zu finden.
Aktiviere die automatische Silbentrennung, um lange Wörter in kleineren Textblöcken oder Spalten korrekt zu umbrechen. Besonders in der Deutschen Sprache, wo lange Wörter häufig vorkommen, verbessert die Silbentrennung die Lesbarkeit und verhindert unschöne Textüberläufe.